<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>控制Div属性 - JS控制DOM实例演示</title>
	<style type="text/css">
		.DomOper{
			width:100%;
			height: 60px;
			line-height: 60px;
			margin: 0 auto;
			text-align: center;
		}
		.DomOper span{
			margin: 0 10px;
			padding: 3px 8px;
			display: inline-block;
			border-radius:5px;
			height: 35px;
			line-height: 35px;
		}
		/*设置第一个span元素的样式*/
		.DomOper span:first-child{
			background-color: #1B6D85;
			color: #ffffff;
		}
		/*设置第二个span元素的样式*/
		.DomOper span:nth-child(2){
			background-color: #A94442;
			color: #ffffff;
		}
		/*设置第三个span元素的样式*/
		.DomOper span:nth-child(3){
			background-color: #E38D13;
			color: #ffffff;
		}
		/*设置第四个span元素的样式*/
		.DomOper span:nth-child(4){
			background-color: #3C763D;
			color: #ffffff;
		}
		/*设置第五个span元素的样式*/
		.DomOper span:nth-child(5){
			background-color: #269ABC;
			color: #ffffff;
		}
		.DomTree{
			/*width:200px;*/
			height: 150px;
			background-color: #009FD9;
			margin: 0 auto;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="DomOper">
		<span onclick="ChangeW()">点击变宽</span>
		<span>点击变高</span>
		<span>点击变色</span>
		<span>点击隐藏</span>
		<span>点击重置</span>
	</div>
	<div class="DomTree" id="DomTree" style="width:200px;"></div>
	<script>
		var DomTag = document.getElementById("DomTree");
		console.log(DomTag);
		
		//点击按钮后触发变宽事件
		function ChangeW(){
			alert("点击了变宽事件");
			//DomTag.style.width = 300;
		}
	</script>
</body>
</html>